import { useRouter } from "expo-router";
import React, { useState } from "react";
import { Alert, Image, ScrollView, Text, TextInput, TouchableOpacity, View } from "react-native";

export default function AddMemberCardScreen() {
  const router = useRouter();
  const [cardType, setCardType] = useState("年卡");
  const [name, setName] = useState("");
  const [validDays, setValidDays] = useState("365");
  const [price, setPrice] = useState("");
  const [desc, setDesc] = useState("");
  const [image, setImage] = useState<string | null>(null);

  const cardTypes = ["年卡", "季卡", "月卡", "次数卡"];

  const pickImage = async () => {
    router.push('/pages/MemberCardBackPicker')
    // const result = await ImagePicker.launchImageLibraryAsync({
    //   mediaTypes: "images",
    //   quality: 0.7,
    // });

    // if (!result.canceled) {
    //   setImage(result.assets[0].uri);
    // }
  };

  const handleSave = () => {
    if (!name || !price) {
      Alert.alert("提示", "请填写完整信息！");
      return;
    }
    Alert.alert("保存成功", `会员卡「${name}」已创建`);
  };

  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      <ScrollView contentContainerStyle={{ padding: 16 }}>
        {/* 会员卡类型 */}
        <Text style={{ fontSize: 16, marginBottom: 8 }}>会员卡类型</Text>
        <View style={{ flexDirection: "row", marginBottom: 16 }}>
          {cardTypes.map((type) => (
            <TouchableOpacity
              key={type}
              style={{
                flexDirection: "row",
                alignItems: "center",
                marginRight: 16,
              }}
              onPress={() => {
                setCardType(type);
                if (type === "次数卡") setValidDays("10");
                else if (type === "年卡") setValidDays("365");
                else if (type === "季卡") setValidDays("90");
                else if (type === "月卡") setValidDays("30");
              }}
            >
              <View
                style={{
                  width: 18,
                  height: 18,
                  borderRadius: 9,
                  borderWidth: 2,
                  borderColor: "#FF6A00",
                  marginRight: 6,
                  justifyContent: "center",
                  alignItems: "center",
                }}
              >
                {cardType === type && (
                  <View
                    style={{
                      width: 10,
                      height: 10,
                      borderRadius: 5,
                      backgroundColor: "#FF6A00",
                    }}
                  />
                )}
              </View>
              <Text>{type}</Text>
            </TouchableOpacity>
          ))}
        </View>

        {/* 卡名称 */}
        <Text style={{ marginBottom: 6 }}>卡名称</Text>
        <TextInput
          placeholder="请输入会员卡名称"
          value={name}
          onChangeText={setName}
          style={styles.input}
        />

        {/* 有效期或次数 */}
        <Text style={{ marginBottom: 6 }}>
          {cardType === "次数卡" ? "可使用次数" : "有效期（天）"}
        </Text>
        <TextInput
          keyboardType="numeric"
          value={validDays}
          onChangeText={setValidDays}
          style={styles.input}
        />

        {/* 售价 */}
        <Text style={{ marginBottom: 6 }}>售价（元）</Text>
        <TextInput
          keyboardType="numeric"
          placeholder="请输入售价"
          value={price}
          onChangeText={setPrice}
          style={styles.input}
        />

        {/* 使用说明 */}
        <Text style={{ marginBottom: 6 }}>使用说明</Text>
        <TextInput
          placeholder="例如：购买后一年内无限次使用店内服务"
          multiline
          value={desc}
          onChangeText={setDesc}
          style={[styles.input, { height: 80, textAlignVertical: "top" }]}
        />

        {/* 上传封面 */}
        <Text style={{ marginBottom: 6 }}>封面图片</Text>
        <TouchableOpacity
          onPress={pickImage}
          style={{
            borderWidth: 1,
            borderColor: "#ddd",
            borderRadius: 10,
            height: 150,
            justifyContent: "center",
            alignItems: "center",
            marginBottom: 20,
          }}
        >
          {image ? (
            <Image
              source={{ uri: image }}
              style={{ width: "100%", height: "100%", borderRadius: 10 }}
              resizeMode="cover"
            />
          ) : (
            <Text style={{ color: "#999" }}>上传封面图（推荐尺寸750x400）</Text>
          )}
        </TouchableOpacity>

        {/* 保存按钮 */}
        <TouchableOpacity
          onPress={handleSave}
          style={{
            backgroundColor: "#FF6A00",
            borderRadius: 30,
            paddingVertical: 14,
            alignItems: "center",
            marginBottom: 50,
          }}
        >
          <Text style={{ color: "#fff", fontSize: 16, fontWeight: "bold" }}>保存并发布</Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
}

const styles = {
  input: {
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
    marginBottom: 16,
    fontSize: 15,
  },
};